<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>统计详情</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/bootcdn/BootCDN/ajax/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/font-awesome.min93e3.css"/>
<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/plugins/datapicker/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/style.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
<style type="text/css">
body{font-size: 14px;}
.dataTables_info {font-size: 12px}
.dataTables_paginate {font-size: 12px;}
</style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content">
	<div class="row" style="height: 40px;">
		<div class="col-sm-12">
			<a href="javascript:window.history.back();" style="color: #1ab394;">返回</a>
		</div>
	</div>
	<div class="row">
		<div class="col-sm-1">
			<select id="listIndex" class="form-control">
				<option value="0">员工</option>
				<option value="1">门店</option>
				<option value="2">部门</option>
			</select>
		</div>
		<div class="col-sm-2">
			<div class="btn-group">
			    <button class="btn btn-primary" type="button">日</button>
			    <button class="btn btn-white" type="button">周</button>
			    <button class="btn btn-white" type="button">月</button>
			    <button class="btn btn-white" type="button">年</button>
			</div>
		</div>
		<div class="col-sm-3">
	        <div class="input-daterange input-group">
	            <input type="text" class="input-sm form-control" name="datetimepicker_start" readonly style="background-color: white;">
	            <span class="input-group-addon" style="background-color: #eeeeee;">到</span>
	            <input type="text" class="input-sm form-control" name="datetimepicker_end" readonly style="background-color: white;">
	        </div>
		</div>
		<div class="col-sm-3 col-sm-offset-1">
			<div class="input-group">
	            <input id="keyword" placeholder="输入名称搜索" type="text" class="form-control"> <span class="input-group-btn"> 
	            <button id="search" type="button" class="btn btn-primary">搜索</button> </span>
	        </div>
		</div>
		<div class="col-sm-1">
			<a href="<%=path%>/view/ui/cardMember"><button type="button" class="btn btn-primary">转化总表单</button></a>
		</div>
		<div class="col-sm-1">
			<a id="export">
			<shiro:hasPermission name="statistical_report:export">
			<button type="button" class="btn btn-primary">导出</button>
			</shiro:hasPermission>
			</a>
		</div>
	</div>
	
	<div class="row" style="margin-top: 20px;">
		<div class="col-sm-12">
			<table id="myTable" class="display">
				<thead>
					<tr>
						<th>员工</th>
		                <th>打开量</th>
		                <th>转发量</th>
		                <th>点击量</th>
		                <th>转化量</th>
					</tr>
				</thead>
				<tbody>
					
				</tbody>
			</table>
		</div>
	</div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/bootcdn/BootCDN/ajax/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<%=path%>/hplus/js/plugins/datapicker/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="<%=path%>/hplus/js/plugins/datapicker/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
var path = "<%=path%>";
var startTime = "";
var endTime = "";
var listIndex = 0;	//0:员工排行；1:门店排行；2:部门排行；
var g_top = 4000;	//前10列
var datatables = null;
$.fn.dataTable.ext.errMode = 'none';

$(function(){
	var now = new Date();
	startTime = now.Format("yyyy-MM-dd")+" 00:00:00";
	endTime = now.Format("yyyy-MM-dd")+" 23:59:59";
	$("input[name='datetimepicker_start']").val(startTime.split(" ")[0]);
	$("input[name='datetimepicker_end']").val(endTime.split(" ")[0]);
	
	$("input[name='datetimepicker_start']").datetimepicker({language:"zh-CN",format: 'yyyy-mm-dd',autoclose: true,minView:2})
	.on("click",function(){
        $("input[name='datetimepicker_start']").datetimepicker("setEndDate",$("input[name='datetimepicker_end']").val())
    }).on('changeDate', function(ev){
    	$(".btn-group>button:eq(0)").removeClass("btn-white").addClass("btn-primary").siblings().removeClass("btn-primary").addClass("btn-white");
    	startTime = $("input[name='datetimepicker_start']").val()+" 00:00:00";
    	endTime = $("input[name='datetimepicker_end']").val()+" 23:59:59";
    	init();
    });
	$("input[name='datetimepicker_end']").datetimepicker({language:"zh-CN",format: 'yyyy-mm-dd',autoclose: true,minView:2}).on("click",function(){
        $("input[name='datetimepicker_end']").datetimepicker("setStartDate",$("input[name='datetimepicker_start']").val())
    }).on('changeDate', function(ev){
    	$(".btn-group>button:eq(0)").removeClass("btn-white").addClass("btn-primary").siblings().removeClass("btn-primary").addClass("btn-white");
    	startTime = $("input[name='datetimepicker_start']").val()+" 00:00:00";
    	endTime = $("input[name='datetimepicker_end']").val()+" 23:59:59";
    	init();
    });
	
	$(".btn-group>button").click(function(){
		var index = $(this).index();
		$(this).removeClass("btn-white").addClass("btn-primary").siblings().removeClass("btn-primary").addClass("btn-white");
		var now = new Date();
		var nowStart = new Date();
		if(index == 0){
			startTime = now.Format("yyyy-MM-dd")+" 00:00:00";
			endTime = now.Format("yyyy-MM-dd")+" 23:59:59";
		}else if(index == 1){
			var week = now.getDay();
			nowStart.setDate(now.getDate() - week + 1);
			startTime = nowStart.Format("yyyy-MM-dd")+" 00:00:00";
			endTime = now.Format("yyyy-MM-dd")+" 23:59:59";
		}else if(index == 2){
			var date = now.getDate();
			nowStart.setDate(1);
			startTime = nowStart.Format("yyyy-MM-dd")+" 00:00:00";
			endTime = now.Format("yyyy-MM-dd")+" 23:59:59";
		}else if(index == 3){
			var date = now.getDate();
			nowStart.setMonth(0);
			nowStart.setDate(1);
			startTime = nowStart.Format("yyyy-MM-dd")+" 00:00:00";
			endTime = now.Format("yyyy-MM-dd")+" 23:59:59";
		}
		$("input[name='datetimepicker_start']").val(startTime.split(" ")[0]);
		$("input[name='datetimepicker_end']").val(endTime.split(" ")[0]);
		
		init();
	});
	
	$("#listIndex").change(function(){
		listIndex = $(this).val();
		init();
	});
	
	$("#search").click(function(){
		datatables.search($("#keyword").val()).draw();
	});
	
	init();
});

function init(){
	func_getBar();
	func_changeExport();
}

//柱状图
function func_getBar(){
	$.post(path+"/social/statistical/getBar",{startTime:startTime,endTime:endTime,listIndex:listIndex,top:g_top},function(data){
		if(data.code == "200"){
			if(datatables != null){
				datatables.clear().destroy();
			}
			if(listIndex==0){
				$('#myTable>thead>tr>th:eq(0)').text("员工");
			}else if(listIndex==1){
				$('#myTable>thead>tr>th:eq(0)').text("门店");
			}else if(listIndex==2){
				$('#myTable>thead>tr>th:eq(0)').text("部门");
			}
			
			var tr = "";
			if(listIndex == 0){	//员工排行
				$.each(data.data,function(i,d){
					tr += "<tr><td>"+d.username+"</td><td>"+d.cardOpenCount+"</td><td>"+d.cardShareCount+"</td><td>"+d.activityOpenCount+"</td><td>"+d.activityCommitCount+"</td></tr>";
				});
			}else if(listIndex == 1){	//门店排行
				$.each(data.data,function(i,d){
					tr += "<tr><td>"+d.storeName+"</td><td>"+d.cardOpenCount+"</td><td>"+d.cardShareCount+"</td><td>"+d.activityOpenCount+"</td><td>"+d.activityCommitCount+"</td></tr>";
				});
			}else if(listIndex == 2){	//部门排行
				$.each(data.data,function(i,d){
					tr += "<tr><td>"+d.deptName+"</td><td>"+d.cardOpenCount+"</td><td>"+d.cardShareCount+"</td><td>"+d.activityOpenCount+"</td><td>"+d.activityCommitCount+"</td></tr>";
				});
			}
			
			$("#myTable>tbody").append(tr);
			
			datatables = $('#myTable').DataTable({
				dom:"lrtip",
		        processing: true,
		        ordering: true,
		        searching: true,
		        info: true,
		        autoWidth: true,
		        lengthChange: false,
		        language: {
		            emptyTable: '没有数据表',
		            info: '从第 _START_ 到第 _END_ 条数据；总共有 _TOTAL_ 条记录',
		            infoEmpty: '没有数据',
		            lengthMenu: '每页显示 _MENU_ 条记录',
		            loadingRecords: '正在加载数据....',
		            processing: '正在处理数据....',
		            zeroRecords: '没有找到匹配的记录',
		            infoFiltered: '',
		            paginate: {
		                first: '首页',
		                previous: '前页',
		                next: '后页',
		                last: '尾页',
		            }
		        },
		        order: [[1, 'desc']],
		        pageLength: 10,
		        pagingType: 'full_numbers',
		        columnDefs: [
		            { orderable: false, targets: 0 }
		       	]
		    });
		}
	},"json");
}

function func_changeExport(){
	var href = path;
	if(listIndex == 0){
		href += "/social/statistical/exportEmployee?startTime=" + startTime + "&endTime=" + endTime;
	}else if(listIndex == 1){
		href += "/social/statistical/exportStore?startTime=" + startTime + "&endTime=" + endTime;
	}else if(listIndex == 2){
		href += "/social/statistical/exportDept?startTime=" + startTime + "&endTime=" + endTime;
	}
	
	$("#export").attr("href",href);
}

Date.prototype.Format = function (fmt) { //author: meizz 
    var o = {
        "M+": this.getMonth() + 1, //月份 
        "d+": this.getDate(), //日 
        "h+": this.getHours(), //小时 
        "m+": this.getMinutes(), //分 
        "s+": this.getSeconds(), //秒 
        "q+": Math.floor((this.getMonth() + 3) / 3),
        "S": this.getMilliseconds() //毫秒 
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}
</script>
</html>